<template>
<div id="menus">
  <el-card :body-style="{ padding: '0px 0px 40px 0px' }" class='outline-body'>
    <div slot="header">
      <span>菜单管理</span>
      <el-button @click="btnStatus=true;dialogVisible=true;dialogTitle='添加'" type="primary" size="mini" icon="el-icon-plus">添加顶级大纲</el-button>
    </div>
    <el-tree :default-expand-all="true" v-loading="treeLoading" :data="outlinesList" :props="{children:'children',label:'text'}">
      <div style="width:100%;" slot-scope="{data}">
        {{data.text}}
        <div style="display:inline" @click.stop>
          <el-tooltip :content="data.status==1?'当前显示':'当前隐藏'" placement="top" effect="light">
            <el-switch @change="setStatus(data)" v-model="data.status" active-color="#9BCBFC" :active-value="1" :inactive-value="0" :width="30"></el-switch>
          </el-tooltip>
          <el-dropdown @command="select">
            <!-- 操作选项 -->
            <el-button size="mini" round>操作</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type:'add',id:data.id}">
                添加下级大纲
              </el-dropdown-item>
              <el-dropdown-item v-if="data.children.length==0" :command="{type:'delete',id:data.id}">
                删除
              </el-dropdown-item>
              <el-dropdown-item :command="{type:'edit',id:data.id,row:data}">
                编辑
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button-group>
            <el-button type="default" size="mini" circle icon="el-icon-arrow-up" @click="sort(data.id,'up',data.sort)"></el-button>
            <el-button type="default" size="mini" circle icon="el-icon-arrow-down" @click="sort(data.id,'down',data.sort)"></el-button>
          </el-button-group>
        </div>
      </div>
    </el-tree>
  </el-card>

  <el-dialog width="400px" :title="dialogTitle" :visible.sync="dialogVisible" @close="dialogClose">
    <el-form label-position="left" :model="formData" ref="formData" :rules="rules" label-width="60px">
      <el-form-item label="名称" prop="text">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="text" @click="dialogVisible=false">取 消</el-button>
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusAdd" v-show="btnStatus">确 定（add）</el-button>
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusEdit" v-show="!btnStatus">确 定(edit)</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data() {
    return {
      status: false,
      rules: {
        text: [{
          validator: (rules, value, callback) => {
            switch (true) {
              case value.trim() === "":
                callback(new Error("不能为空"));
                break;
              case !/^.{2,18}$/.test(value):
                callback(new Error("2-18"));
                break;
              default:
                callback();
            }
          }
        }]
      },
      btnStatus: true,
      treeLoading: false,
      buttonOkIcon: "",
      buttonDisabled: false,
      dialogTitle: "",
      dialogVisible: false,
      outlinesList: [],
      formData: {
        text: "",
        pid: 0
      }
    }
  },
  created() {
    this.getOutlinesList();
  },
  methods: {
    //设置状态
    setStatus(data) {
      this.$http
        .get("/outlines/status", {
          params: {
            id: data.id,
            status: data.status
          }
        })
        .then(() => { 
        });
    },
    getOutlinesList() {
      this.treeLoading = true;
      this.$http.get("/outlines/list").then(result => {
        this.treeLoading = false;
        if (result.data.error > 0 && result.data.error == 4) {
          this.$router.push("/login");
          return;
        }
        this.outlinesList = this.$tree(result.data.data);
      });
    },
    //排序
    sort(id, dir, sort) {
      this.$http
        .post(
          "/outlines/sort",
          this.$qs.stringify({
            id,
            dir,
            sort
          })
        )
        .then(() => {
          this.getOutlinesList();
        });
    },
    //关闭对话框
    dialogClose() {
      this.formData.text = "";
      this.formData.pid = 0;
    },
    //增加数据
    menusAdd() {
      this.$refs.formData.validate(pass => {
        if (!pass) return;
        this.buttonOkIcon = "el-icon-loading";
        this.buttonDisabled = true;

        this.$http
          .post("/outlines/add", this.$qs.stringify(this.formData))
          .then(result => {
            this.buttonOkIcon = "";
            this.buttonDisabled = false;
            this.getOutlinesList();
            this.dialogVisible = false;
          });
      });
    },
    //编辑数据
    menusEdit() {
      this.$http
        .post("/outlines/edit", this.$qs.stringify(this.formData))
        .then(result => {
          this.dialogVisible = false;
          this.getOutlinesList();
        });
    },
    // 删除数据
    delete(id) {
      this.$http.get(`/outlines/delete?id=${id}`).then(result => {
        this.getOutlinesList();
      });
    },
    //下拉列表
    select(obj) {
      switch (obj.type) {
        case "add":
          this.btnStatus = true;
          this.formData.pid = obj.id;
          this.dialogVisible = true;
          this.dialogTitle = "添加下级菜单";
          break;
        case "edit":
          this.btnStatus = false;
          this.dialogVisible = true;
          this.dialogTitle = "编辑";
          this.formData.text = obj.row.text;
          this.$set(this.formData, "id", obj.id);
          break;
        case "delete":
          this.$confirm("是否继续?", "提示", {
              type: "warning"
            })
            .then(() => {
              this.delete(obj.id);
            })
            .catch(() => {
              console.log("no");
            });
          break;
      }
    }
  }
};
</script>

<style>
#menus .el-tree-node__content {
  height: 40px;
  margin: 10px 0 8px 0;
}
</style>
